<nz-header [class.not-dark]="!darkActive" class="navbar">
    <a href="#" [routerLink]="['/']">
        <img src="assets/images/cds.png" class="item" alt="CDS logo" title="{{'navbar_home' | translate}}" />
    </a>
    <ng-container *ngIf="currentAuthSummary">
        <a nz-button nzType="link" class="item link" href="#" [routerLink]="['project', 'list', 'all']">
            {{ 'navbar_projects' | translate }}
        </a>

        <button nz-dropdown [nzDropdownMenu]="bookmarks" nz-button nzType="text" [nzClickHide]="true"
            class="dropdown title">
            Bookmarks <i nz-icon nzType="caret-down" nzTheme="fill"></i>
        </button>
        <nz-dropdown-menu #bookmarks="nzDropdownMenu">
            <ul nz-menu class="bookmark">
                <ng-container *ngFor="let prj of listFavs">
                    <ng-container [ngSwitch]="prj.type">
                        <ng-container *ngSwitchCase="'workflow'">
                            <li nz-menu-item>
                                <a class="item" href="#"
                                    [routerLink]="['project', prj.key, 'workflow', prj.workflow_name]">
                                    <div class="details">
                                        <div class="title">
                                            {{prj.workflow_name}}
                                        </div>
                                    </div>
                                    <div class="info mt">
                                        {{'navbar_workflow_in' | translate}} {{prj.key}}
                                    </div>
                                </a>
                            </li>
                        </ng-container>
                        <ng-container *ngSwitchCase="'application'">
                            <li nz-menu-item>
                                <a class="item" href="#"
                                    [routerLink]="['project', prj.key, 'application', prj.application_name]">
                                    <div class="details">
                                        <div class="title">
                                            {{prj.application_name}}}
                                        </div>
                                        <div class="info mt">
                                            {{'navbar_application_in' | translate}} {{prj.key}}
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ng-container>
                        <ng-container *ngSwitchDefault>
                            <li nz-menu-item>
                                <a class="item" href="#" [routerLink]="['project', prj.key]">
                                    <div class="details">
                                        <div class="title">
                                            {{prj.name}}
                                        </div>
                                        <div class="info mt">
                                            {{'common_project' | translate}}
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ng-container>
                    </ng-container>
                </ng-container>
                <li nz-menu-item>
                    <a class="item" href="#" [routerLink]="['favorite']">
                        {{'common_favorites_all' | translate}}
                    </a>
                </li>
            </ul>
        </nz-dropdown-menu>
    </ng-container>

    <ng-container *ngIf="currentAuthSummary && apiConfig">
        <ng-container *ngIf="currentAuthSummary.isAdmin() || !apiConfig.project_creation_disabled">
            <button nz-button nzType="default" nzGhost [routerLink]="['/project']">
                <i nz-icon nzType="plus"></i>
                {{ 'navbar_project_create' | translate }}
            </button>
        </ng-container>
        <ng-container
            *ngIf="!currentAuthSummary.isAdmin() && apiConfig.project_creation_disabled && apiConfig.project_info_creation_disabled">
            <button nz-button nzType="default" nzGhost [nzTooltipTitle]="createProjectTemplate" nz-tooltip>
                <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                {{ 'navbar_project_create' | translate }}
            </button>
            <ng-template #createProjectTemplate>
                <markdown [data]="apiConfig.project_info_creation_disabled"></markdown>
            </ng-template>
        </ng-container>
    </ng-container>

    <div class="right menu details">

        <!-- RING -->
        <div class="ring" *ngIf="currentAuthSummary">
            <nz-tag *ngIf="currentAuthSummary.isMaintainer() && currentAuthSummary.user.ring !== 'ADMIN'"
                nzColor="#f50">Maintainer</nz-tag>
            <nz-tag *ngIf="currentAuthSummary.user.ring === 'ADMIN' && !currentAuthSummary.isAdmin()" nzColor="#f50">
                Maintainer
                <a class="detail" (click)="mfaLogin()" title="Elevate to admin"><i nz-icon nzType="unlock"
                        nzTheme="fill"></i></a>
            </nz-tag>
            <nz-tag *ngIf="currentAuthSummary.isAdmin()" nzColor="#f00">Admin</nz-tag>
        </div>

        <!-- SEARCH AREA -->
        <div class="search" *ngIf="currentAuthSummary">
            <nz-input-group [nzSuffix]="suffixIconSearch" nz-popover [nzPopoverContent]="popupSearchTemplate"
                nzPopoverPlacement="bottom" nzPopoverTrigger="click">
                <input type="text" nz-input placeholder="Search..." [(ngModel)]="searchValue" (blur)="search()"
                    (click)="search()" (keyup)="search()" />
            </nz-input-group>
            <ng-template #suffixIconSearch>
                <i nz-icon nzType="search"></i>
            </ng-template>
        </div>
        <ng-template #popupSearchTemplate>
            <div class="content searchpopup">
                <div nz-row class="header">
                    <div nz-col nzSpan="12">
                        <div *ngIf="containsResult && isSearch">
                            <i nz-icon nzType="search"></i> {{'navbar_results' | translate}}
                        </div>
                        <div *ngIf="containsResult && !isSearch">
                            <i nz-icon nzType="history" nzTheme="outline"></i>Seen recently
                        </div>
                        <div *ngIf="!containsResult">
                            <i nz-icon nzType="search"></i>{{'navbar_no_result' | translate}}
                        </div>
                    </div>
                    <div nz-col nzSpan="12">
                        <div nz-tooltip nzTooltipPlacement="left" class="right"
                            [nzTooltipTitle]="'navbar_search_help_details' | translate">
                            <i nz-icon nzType="question-circle" nzTheme="outline"></i>
                            {{ 'navbar_search_help' | translate }}
                        </div>
                    </div>
                </div>

                <div nz-row *ngIf="containsResult">
                    <div nz-col nzSpan="12" class="borderRight">
                        <div class="title">
                            <div class="content">Projects</div>
                        </div>
                        <div class="item" *ngIf="!searchProjects || searchProjects.length <= 0">
                            <div class="content">No project</div>
                        </div>
                        <div class="item" *ngFor="let el of searchProjects">
                            <i nz-icon nzType="star" nzTheme="outline" *ngIf="el.favorite"></i>
                            <div class="content">
                                <a class="header" (click)="$event.stopPropagation()"
                                    [routerLink]="['/project', el.projectKey]"
                                    title="{{ 'common_project_title' | translate }}{{el.title}}">
                                    {{el.title}}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div nz-col nzSpan="12">
                        <div nz-col nzSpan="12">
                            <div class="title">
                                <div class="content">Workflows</div>
                            </div>
                        </div>
                        <div class="item" *ngIf="!searchWorkflows || searchWorkflows.length <= 0">
                            <div class="content">No workflow</div>
                        </div>
                        <div class="item" *ngFor="let el of searchWorkflows">
                            <i nz-icon nzType="star" nzTheme="outline" *ngIf="el.favorite"></i>
                            <div class="content">
                                <a class="header" (click)="$event.stopPropagation()"
                                    [routerLink]="['/project', el.projectKey, 'workflow', el.title]"
                                    title="{{ 'common_workflow_title' | translate }}{{el.title}}">
                                    {{el.title}}
                                </a>
                                <div class="description">{{'navbar_in_project' | translate}}
                                    <a (click)="$event.stopPropagation()" [routerLink]="['/project', el.projectKey]"
                                        title="{{ 'common_project_title' | translate }}{{el.title}}">
                                        {{el.projectKey}}
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </ng-template>

        <!-- HELP -->
        <ng-container *ngIf="help?.content?.length > 0">
            <div nz-popover [nzPopoverContent]="popupTemplateHelp" class="icon popover">
                <div>
                    <i nz-icon nzType="phone" nzTheme="fill"></i>
                </div>
            </div>
        </ng-container>
        <ng-template #popupTemplateHelp>
            <div class="content helppopup">
                <markdown [data]="help.content"></markdown>
            </div>
        </ng-template>

        <!-- Settings -->
        <div nz-dropdown [nzDropdownMenu]="settings" class="icon dropdown">
            <i nz-icon nzType="setting" nzTheme="fill"></i>
            <i nz-icon nzType="caret-down" nzTheme="fill" class="ml12"></i>
        </div>
        <nz-dropdown-menu #settings="nzDropdownMenu">
            <ul nz-menu>
                <ng-container *ngIf="currentAuthSummary">
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'user', currentAuthSummary.user.username]">{{
                            'navbar_profile' | translate }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'cdsctl']">{{ 'navbar_cdsctl' | translate }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'action']">{{ 'navbar_actions' | translate }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'user']">{{ 'navbar_users' | translate }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'group']">{{ 'navbar_groups' | translate }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'worker-model']">{{ 'navbar_worker_models' |
                            translate
                            }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'workflow-template']">{{ 'navbar_workflow_templates'
                            |
                            translate }}</a>
                    </li>
                    <li nz-menu-divider></li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'queue']">{{ 'admin_queue_title' | translate }}</a>
                    </li>

                    <li nz-menu-divider></li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['settings', 'downloads']">{{ 'navbar_downloads' | translate
                            }}</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['docs', '']" target="_blank" rel="noopener noreferrer">{{
                            'navbar_documentation' | translate }}</a>
                    </li>

                    <li nz-menu-divider></li>
                </ng-container>

                <li nz-menu-item>
                    <nz-switch [ngModel]="darkActive" (ngModelChange)="changeTheme()"></nz-switch>Dark mode
                </li>

                <ng-container *ngIf="currentAuthSummary">
                    <li nz-menu-divider></li>
                    <li nz-menu-item>
                        <a (click)="clickLogout()">{{ 'navbar_disconnect' | translate }}</a>
                    </li>
                </ng-container>
            </ul>
        </nz-dropdown-menu>

        <!-- Maintainer part -->
        <ng-container *ngIf="currentAuthSummary && currentAuthSummary.isMaintainer()">
            <div nz-dropdown [nzDropdownMenu]="adminMenu" class="icon dropdown">
                <i nz-icon nzType="tool" nzTheme="fill"></i>
                <i nz-icon nzType="caret-down" nzTheme="fill" class="ml12"></i>
            </div>
            <nz-dropdown-menu #adminMenu="nzDropdownMenu">
                <ul nz-menu>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['admin', 'worker-model-pattern']">Patterns of configuration
                            scripts</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['admin', 'hooks-tasks']">Hooks tasks summary</a>
                    </li>
                    <li nz-menu-item>
                        <a href="#" [routerLink]="['admin', 'services']">Monitoring</a>
                    </li>
                </ul>
            </nz-dropdown-menu>
        </ng-container>
    </div>
</nz-header>
